<template>
    <div class="container">
        <el-form ref="formName" :model="form" labelWidth="80px" :rules="Rules">
            <el-form-item label="电话：" prop="tel">
                <el-input v-model="form.tel"></el-input>
            </el-form-item>
            <el-form-item label="E-mail：" prop="email">
                <el-input v-model="form.email"></el-input>
            </el-form-item>
            <el-form-item label="地址：" prop="address">
                <el-input type="textarea" v-model="form.address" :rows="5"></el-input>
            </el-form-item>
            <el-form-item class="submit">
                <el-button type="primary" @click="onSubmit">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                form: {
                    tel: '',
                    email: '',
                    address: ''
                },
                datas: {},
                Rules: {
                    tel: [{
                        required: true,
                        message: '请填写',
                        trigger: 'blur'
                    }],
                    email: [{
                        required: true,
                        message: '请填写',
                        trigger: 'blur'
                    }],
                    address: [{
                        required: true,
                        message: '请填写',
                        trigger: 'blur'
                    }],
                },
            };
        },
        created() {
            this.getInfo();
        },
        methods: {
            getInfo() {
                this.apiPost("Website/information").then(res => {
                    this.form = res ? res : this.datas;
                });
            },
            onSubmit() {
                this.$refs.formName.validate((valid) => {
                    if (valid) {
                        let data = this.form;
                        this.apiPost('Website/infoSet', data).then(res => {
                            let remind = res.error ? 'error' : 'success';
                            _g.toastMsg(remind, res.msg);
                            if (!res.error) {
                                this.getInfo()
                            }
                        })
                    } else {
                        return false;
                    }
                })
            }
        }
    };
</script>
<style lang="css" scoped>
    .container {
        box-sizing: border-box;
        width: 100%;
        background: #ffffff;
        min-height: 100%;
        font-size: 14px;
        overflow: hidden;
    }

    .container .el-form {
        width: 500px;
        margin: 50px auto;
    }

    .submit {
        text-align: center;
        margin-top: 50px;
    }
</style>